<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <div id="root">
    <h1>{{title}}</h1>
    <ul>
      <li
        v-for="prod in cart"
      >
        {{prod.id}} -
        {{prod.title}} -
        {{prod.price.toFixed(2)}} -
        <button>-</button>
        {{prod.amount}}
        <button @click="increse(prod)">+</button> -
        {{(prod.price * prod.amount).toFixed(2)}} -
        <button @click="removeProd(prod.id)">删除</button>
      </li>
    </ul>
    <div>总价格：{{totalPrice}}</div>
    <div>总数量：{{totalAmount}}</div>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script>
    const app = new Vue({
      el: '#root',
      data: {
        title: 'Vue购物车体验示例',
        cart: [
          {id: 1, title: '电脑', price: 3999, amount: 1},
          {id: 2, title: '手机', price: 1999, amount: 2},
          {id: 3, title: '空调', price: 5999, amount: 1}
        ]
      },
      computed: {
        totalPrice() {
          return  this.cart.reduce((sum, prod) => sum += prod.price * prod.amount, 0)
        },
        totalAmount() {
          return this.cart.reduce((sum, prod) => sum += prod.amount, 0)
        }
      },
      methods: {
        increse(prod) {
          prod.amount += 1
        },
        removeProd(id) {
          console.log(id)
          this.cart = this.cart.filter(prod => prod.id !== id)
        }
      }
    })
  </script>
</body>
</html>